<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>选择缓存</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport"
          content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

    <!-- 固定的css 和 common.js 的引用    -->
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm-extend.min.css">
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
    <script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>
    <!-- <script type="text/javascript" src="../../common/common/common.js"></script> -->

    <!-- <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
		<script>
			var vConsole = new VConsole();
		</script> -->
    <!--banner-->

    <style type="text/css">
        body, .page {
            background: #f2f2f2;
        }

        ul {
            list-style: none;
            padding: 0;
        }

        .borFlex {
            background: #fff;
            display: flex;
            justify-content: space-around;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
        }

        .contain {
            display: flex;
            justify-content: space-around;
            padding: 1rem 0.5rem 0;
        }

        .seletIcon {
            display: none;
        }

        .seletIconNone {
            display: inline-block;
            width: 1.5rem;
            height: 1.5rem;
            background: #fff;
            border: 1px solid #f2f2f2;
            border-radius: 50%;
        }

        .listBorder {
            border: 1px solid #666;
            line-height: 1rem;
            min-width: 2rem;
            height: 1rem;
            font-size: 0.7rem;
            text-align: center;
            margin: 0 0.4rem;
        }

        .listLfet {
            flex: 1;
            font-size: 0.8rem;
            color: rgb(91, 91, 91);
        }

        .listTime {
            font-size: 0.6rem;
        }

        .buttonOut {
            width: 100%;
            justify-content: space-around;
            position: fixed;
            bottom: 1.5rem;
            display: none;
        }

        .buttonWidth {
            width: 5rem !important;
            height: 2rem !important;
            line-height: 2rem !important;
        }
    </style>
</head>

<body>
<div class="page">
    <div class="content">
        <header class="bar borFlex">
            <img class="icon icon-left lfetDiv" src="http://47.104.254.28/commonfile/img/img/leftIcon.png" alt=""
                 style="color: #000;display: inline-block;">
            <h1 class="" style="color: #000;font-size: 0.8rem;display: inline-block;flex: 1;text-align: center;">缓存</h1>
            <text class="rightDiv"
                  style="display:inline-block;font-size: 0.7rem;color: #49c788;letter-spacing: 0.04rem;line-height: 2.2rem">
                缓存管理
            </text>

        </header>
        <div class="contentOut" style="background: #fff;border: 0;margin-top:2.3rem;padding-bottom: 1rem">

        </div>
        <div class="buttonOut">
            <button style="display: block" class="button button-big button-round buttonNo buttonWidth"> 取消</button>
            <input style="display: block" id="b2" type="button"
                   class="button button-big button-round buttonDel buttonWidth" value="删除"/>
        </div>
    </div>
</div>
<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ = jQuery.noConflict();</script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js'
        charset='utf-8'></script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js'
        charset='utf-8'></script>


<script type="text/javascript">
    let data = [];
    //返回 按钮
    $('.lfetDiv').on('click', function () {
        console.log('返回按钮');
        native_goto("local/finish");
    })

    //	调接口
    function getParams(data) {
        // 		data需要转成json调用 ，函数urlParamParseJson();
        var jsonData = urlParamParseJson(data);

    }


    //获取缓存数据
    function getAjax() {
        net_request('post', 'api/v1/getLocalVedio',
            {}, newsSuccessCallBack, newsTypeErrorCallBack)
    };

    function newsSuccessCallBack(res) {

        //返回的json数据实例，因为调用post走的是app接口，所以你调试先用我这个模拟数据调试一下； type：1直播中 2回放 3视频
        //{"list":[{"filename":"1601037211096","title":"测试第一课a","type":"2","date":"2020-09-25 18:03:01"}]}
        let html = '';
        if (res.list.length > 0) {
            data = res.list;
            data.map(item => {
                if (item.type == 1) {
                    item.type = '直播中'
                } else if (item.type == 2) {
                    item.type = '回放'
                } else if (item.type == 3) {
                    item.type = '视频'
                }
                item.data = item.date.substr(5, 5).replace(/-/g, "月");
                item.time = item.date.substr(10, 6);
            });
            for (let i = 0; i < data.length; i++) {
                html += `
                                 <div class="contain" data-id="${data[i].filename}">
                    <div class="seletIcon">
<!--                        <text class="seletIconNone"></text>-->
                        <input type="checkbox" name="check" value="${i}" />
                    </div>

                    <div class="listBorder">${data[i].type}</div>
                    <div class="listLfet">
                        <div>${data[i].title}</div>
                        <div class="listTime" style="margin-top: 0.2rem;">
                            <text style="">[${data[i].type}]</text>
                            <text>${data[i].data}日</text>
                            <text>${data[i].time}</text>
                        </div>
                    </div>
                </div>
               `
            }
        }
        $('.contentOut').html(html);
    }


    function newsTypeErrorCallBack(err) {
        console.log(err)
    }

    let iconShow = true;
    let arr = [];
    $(document).ready(function () {
        // let res = {
        //     "list": [{
        //         "filename": "1601037211096",
        //         "title": "测试第一课a",
        //         "type": "2",
        //         "date": "2020-09-25 18:03:01"
        //     }, {
        //         "filename": "1601037211095",
        //         "title": "测试第一课a",
        //         "type": "2",
        //         "date": "2020-09-25 18:03:01"
        //     }, {
        //         "filename": "1601037211096",
        //         "title": "测试第一课a",
        //         "type": "2",
        //         "date": "2020-09-25 18:03:01"
        //     }, {
        //         "filename": "1601037211096",
        //         "title": "测试第一课a",
        //         "type": "2",
        //         "date": "2020-09-25 18:03:01"
        //     }, {
        //         "filename": "1601037211096",
        //         "title": "测试第一课a",
        //         "type": "2",
        //         "date": "2020-09-25 18:03:01"
        //     }, {
        //         "filename": "1601037211096",
        //         "title": "测试第一课a",
        //         "type": "2",
        //         "date": "2020-09-25 18:03:01"
        //     }, {
        //         "filename": "1601037211096",
        //         "title": "测试第一课a",
        //         "type": "2",
        //         "date": "2020-09-25 18:03:01"
        //     }, {
        //         "filename": "1601037211096",
        //         "title": "测试第一课a",
        //         "type": "2",
        //         "date": "2020-09-25 18:03:01"
        //     }, {"filename": "1601037211096", "title": "测试第一课a", "type": "2", "date": "2020-09-25 18:03:01"}]
        // }

        getAjax();
    });
    $('.rightDiv').on('click', function () {
        if (iconShow) {
            $('.seletIcon').css('display', 'inline-block');
            $('.buttonOut').css('display', 'flex');
            iconShow = false;
        } else {
            $('.seletIcon').css('display', 'none');
            $('.buttonOut').css('display', 'none');
            iconShow = true;
        }
    });
    $('.buttonNo').on('click', function () {
        if (iconShow) {
            $('.seletIcon').css('display', 'inline-block');
            $('.buttonOut').css('display', 'flex');
            iconShow = false;
        } else {
            $('.seletIcon').css('display', 'none');
            $('.buttonOut').css('display', 'none');
            iconShow = true;
        }
    });

    $('.contentOut').on('click', '.contain', function (e) {
        if (iconShow) {
            //获取单条记录的 filename
            let cid = e.currentTarget.dataset.id;
            var values = {
                url: cid,
                type: "localvedio"
            };
            console.log(values)
            send_data(values);
            getAjax();

        }

    });

    // 获取选中数据
    $("#b2").click(function () {
        //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
        //意思是选择被选中的checkbox
        let a = [];
        let arr = [];
        $.each($('input[type=checkbox]:checked'), function () {
            a.push($(this).val());
        });
        arr = a;
        console.log(arr)
        let filenameArr = [];
        let newArr = [];
        arr.map((item) => {
            data.map((v, i) => {
                if (i == item) {
                    console.log(v.filename);
                    filenameArr.push(v.filename)
                }
            })
        });
        newArr = [...filenameArr, ...newArr];
        var values = {
            url: newArr.join(','),
            type: "deletevedio"
        };
        console.log(values);
        send_data(values);
        getAjax();
        $('.seletIcon').css('display', 'none');
        $('.buttonOut').css('display', 'none');
    });
</script>
</body>

</html>